<template>
  <a-spin style="display: flex" :loading="uploadLoading?.loading">
    <a-upload action="/" :fileList="file ? [file] : []" :show-file-list="false" :auto-upload="false" ref="uploadRef"
      @change="onChange" @progress="onProgress">
      <template #upload-button>
        <div :class="`arco-upload-list-item${file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
          }`">
          <div v-if="props.type === 'img'">
            <div class="arco-upload-list-picture custom-upload-avatar" v-if="props?.headimg">
              <img :src="`${baseUrl}${props?.headimg}`" />
              <div class="arco-upload-list-picture-mask">
                <IconEdit />
              </div>
            </div>
            <div class="arco-upload-picture-card" v-else>
              <div class="arco-upload-picture-card-text">
                <IconPlus />
                <div style="margin-top: 10px; font-weight: 600">Upload</div>
              </div>
            </div>
          </div>
          <div v-else-if="props.type === 'file'" class="file_name">
            <div v-if="props?.wordFile">
              <div class="file_name">
                <icon-drive-file />{{ props?.wordFile }}
              </div>
              <icon-close class="close_btn" @click.stop="clearFile" />
            </div>
            <div class="arco-upload-picture-card" v-else>
              <div class="arco-upload-picture-card-text">
                <IconPlus />
                <div style="margin-top: 10px; font-weight: 600">Upload</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </a-upload>
  </a-spin>
</template>

<script lang="ts">
import { IconEdit, IconPlus } from '@arco-design/web-vue/es/icon';
import { ref, reactive } from 'vue';
import { Message } from '@arco-design/web-vue';
import { baseUrl } from '@/utils/const';
export default {
  components: { IconPlus, IconEdit },
  props: {
    parentInfo: {
      type: Function,
      required: true,
    },
    changeForm: {
      type: Function,
      required: true,
    },
    type: {
      type: String,
      required: true,
    },
    headimg: {
      type: String,
    },
    wordFile: {
      type: String,
    },
  },
  setup(props) {
    const file = ref();
    const uploadRef = ref();
    const uploadLoading = reactive({ loading: false });
    const onChange = async (_: any, currentFile: any) => {
      file.value = {
        ...currentFile,
      };
      uploadLoading.loading = true
      try {
        const res = await props?.parentInfo({
          file: file?.value?.file
        })
        uploadLoading.loading = false
        if (res.code === 1) {
          props?.changeForm(res?.data?.url)
          Message.success('添加成功');
        }
        else {
          file.value = null
        }
      } catch (error) {
        uploadLoading.loading = false
        file.value = null
      }
    };
    const onProgress = (currentFile: any) => {
      file.value = currentFile;
    };
    const clearFile = ()=>{
      props?.changeForm('')
    }
    return {
      file,
      uploadRef,
      onChange,
      onProgress,
      uploadLoading,
      props,
      baseUrl,
      clearFile
    }
  },
};
</script>

<style scoped lang="less">
.upload-img {}

:deep(.arco-upload-list-item) {
  margin: 0;
}

.file_name {
  max-width: 300px;
  /* 控制宽度 */
  white-space: nowrap;
  /* 不换行 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 启用省略号 */
}

.close_btn {
  position: absolute;
  right: -25px;
  bottom: 3px;
}
</style>
